<!-- toaster directive -->
<toaster-container toaster-options="{'position-class': 'toast-top-right', 'close-button':true}"></toaster-container>
<!-- / toaster directive -->

<!-- 导航条 -->
<div class="bg-white bread-crumb">
    <ul class="breadcrumb b-a m-b-n-xs lter b-b wrapper-md">
        <li><a ui-sref="main.tpl.homePage"><i class="fa fa-home"></i> 首页</a></li>
        <li><a ui-sref="main.funScenes.activity.list" href="">活动管理</a></li>
        <li class="active" ng-bind="title"></li>
    </ul>
</div>

<!-- 内容区域 -->
<div class="wrapper-md content">
    <div class="panel panel-default">
        <!-- 头部 -->
        <div class="panel-heading font-bold">{{title}}
            <a class="btn btn-sm btn-icon btn-rounded btn-default pull-right m-t-n-xs" ui-sref="main.funScenes.activity.list"><i class="text-md fa fa-times text-muted"></i></a>
        </div>
        <!--表单-->
        <div class="panel-body">
            <form class="form-horizontal" id="activity" name="user_form" ng-submit="submit()">
                <!--活动名称-->
                <div class="form-group">
                    <label class="col-lg-2 col-sm-3 control-label" for="theme"><span class="text-danger wrapper-sm">*</span>活动名称:</label>
                    <div class="col-sm-6">
						<input type="text" class="form-control" name="theme" id="theme" maxlength="16" placeholder="请输入活动名称" ng-model="record.theme">
                    </div>
                </div>
                <div class="line line-dashed b-b line-lg pull-in"></div>
                
                <!--主办地-->
                <div class="form-group">
                    <label class="col-lg-2 col-sm-3 control-label" for="city"><span class="text-danger wrapper-sm">*</span>主办地:</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" name="city" id="city" maxlength="16" placeholder="请输入主办地" ng-model="record.city">
                    </div>
                </div>
                <div class="line line-dashed b-b line-lg pull-in"></div>
                
                <!--活动主办地址-->
                <div class="form-group">
                    <label class="col-lg-2 col-sm-3 control-label" for="hostAddr"><span class="text-danger wrapper-sm">*</span>活动主办地址:</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" name="hostAddr" id="hostAddr" maxlength="100" placeholder="请输入活动主办地址" ng-model="record.hostAddr">
                    </div>
                </div>
                <div class="line line-dashed b-b line-lg pull-in"></div>
                
                <!--举办日期-->
                <!-- <div class="form-group">
                    <label class="col-lg-2 col-sm-3 control-label" for="heldTime"><span class="text-danger wrapper-sm">*</span>举办日期:</label>
                    <div class="row">
                    	<div class="col-sm-2">
							<input type="text" id="heldTime" placeholder="请选择举办日期" class="form-control" onclick="laydate({istime: true, format: 'YYYY-MM-DD', start: laydate.now(0, 'YYYY-MM-DD')})"/>
						</div>
					</div> 
                </div>
                <div class="line line-dashed b-b line-lg pull-in"></div> -->
                
                <!--报名日期-->
                <div class="form-group">
                    <label class="col-lg-2 col-sm-3 control-label" for="preTime"><span class="text-danger wrapper-sm">*</span>报名起止日期:</label>
                    <div class="row">
                    	<div class="col-sm-2">
							<input type="text" id="preStartTime" placeholder="请选择报名开始日期" class="form-control" onclick="laydate({format: 'YYYY-MM-DD', start: laydate.now(0, 'YYYY-MM-DD')})"/>
						</div>
						
						<div class="col-sm-2">
							<input type="text" id="preEndTime" placeholder="请选择报名结束日期" class="form-control" onclick="laydate({format: 'YYYY-MM-DD', start: laydate.now(0, 'YYYY-MM-DD')})"/>
						</div>
					</div> 
                </div>
                <div class="line line-dashed b-b line-lg pull-in"></div>
                
                <!--正式报名日期-->
                <!-- <div class="form-group">
                    <label class="col-lg-2 col-sm-3 control-label" for="formalTime"><span class="text-danger wrapper-sm">*</span>正式报名日期:</label>
                    <div class="row">
                    	<div class="col-sm-2">
							<input type="text" id="formalTime" placeholder="请选择正式报名日期" class="form-control" onclick="laydate({istime: true, format: 'YYYY-MM-DD', start: laydate.now(0, 'YYYY-MM-DD')})"/>
						</div>
					</div> 
                </div>
                <div class="line line-dashed b-b line-lg pull-in"></div> -->
                
                <!--活动时间-->
                <div class="form-group">
                    <label class="col-lg-2 col-sm-3 control-label" for="activityTime"><span class="text-danger wrapper-sm">*</span>活动起止时间:</label>
                    <div class="row">
                    	<div class="col-sm-2">
							<input type="text" id="activityStartTime" placeholder="请选择活动开始日期" class="form-control" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm', start: laydate.now(0, 'YYYY-MM-DD hh:mm')})"/>
						</div>
						
						<div class="col-sm-2">
							<input type="text" id="activityEndTime" placeholder="请选择活动结束日期" class="form-control" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm', start: laydate.now(0, 'YYYY-MM-DD hh:mm')})"/>
						</div>
					</div>
                </div>
                <div class="line line-dashed b-b line-lg pull-in"></div>
                
                <!-- 活动详情-->
                <div class="form-group">
                    <label class="col-lg-2 col-sm-3 control-label" for="detailUrl"><span class="text-danger wrapper-sm">*</span>活动详情图片:</label>
                    <!-- <div class="col-sm-6">
                        <input type="text" class="form-control" name="detailUrl" id="detailUrl" maxlength="65" placeholder="请输入H5链接地址" ng-model="record.detailUrl">
                    </div> -->
                    
                    <div class="col-sm-6">
                    	<div class="previewWrap fl">
							<up-load multi="1" draggable="true" data='detailImgData' size="310" ratio='' class="previewMain">
                                <div class="upLoadImgWrap">
                                    <div class="preViewImgWrap fl" ng-repeat="preImg in detailImgData">
                                        <div class="preViewImg">
                                            <div class="picItem">
                                                <div class="mask"><span class="reUpLoad" index="{{$index}}">重新上传</span></div>
                                                <div><img ng-src="{{preImg.src[0]}}" onload="if(this.width>=this.height){this.style.width='100%'}else{this.style.height='100%'}"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div ng-show="detailImgData.length<1" class="clear">
                                        <div class="text fl" ng-show="detailImgData.length<1">
                                            	点击上传图片<br>(请上传300KB以内图片)<br>(限jpg/png/jpeg)
                                        </div>
                                        <label class="upLoadImg fl" for="uploadFile">
                                        	<img src="../../res/img/addPic.png" alt="">
                                            <input type="file" accept="image/png,image/gif,image/jpeg" id="uploadFile" autocomplete="off">
                                        </label>
                                    </div>
                                </div>
                            </up-load>
						</div>
                    </div>
                </div>
                <div class="line line-dashed b-b line-lg pull-in"></div>
                
                <!-- 规则描述-->
                <!-- <div class="form-group">
                    <label class="col-lg-2 col-sm-3 control-label" for="ruleDesc"><span class="text-danger wrapper-sm">*</span>规则描述:</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" name="ruleDesc" id="ruleDesc" maxlength="33" placeholder="请输入规则描述" ng-model="record.ruleDesc">
                    </div>
                </div>
                <div class="line line-dashed b-b line-lg pull-in"></div> -->
                
                <!-- 主办单位-->
                <div class="form-group">
                    <label class="col-lg-2 col-sm-3 control-label" for="organizer"><span class="text-danger wrapper-sm">*</span>主办单位:</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" name="organizer" id="organizer" maxlength="100" placeholder="请输入主办单位" ng-model="record.organizer">
                    </div>
                </div>
                <div class="line line-dashed b-b line-lg pull-in"></div>
				
				<!-- 承办单位-->
				<div class="form-group">
                    <label class="col-lg-2 col-sm-3 control-label" for="contractor"><span class="text-danger wrapper-sm">*</span>承办单位:</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" name="contractor" id="contractor" maxlength="100" placeholder="请输入承办单位" ng-model="record.contractor">
                    </div>
                </div>
                <div class="line line-dashed b-b line-lg pull-in"></div>
				
				<!-- 协办单位-->
				<div class="form-group">
                    <label class="col-lg-2 col-sm-3 control-label" for="assist">协办单位:</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" name="assist" id="assist" maxlength="100" placeholder="请输入协办单位" ng-model="record.assist">
                    </div>
                </div>
                <div class="line line-dashed b-b line-lg pull-in"></div>
				
				<!-- 支持媒体-->
				<div class="form-group">
                    <label class="col-lg-2 col-sm-3 control-label" for="media">支持媒体:</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" name="media" id="media" maxlength="100" placeholder="请输入支持媒体" ng-model="record.media">
                    </div>
                </div>
                <div class="line line-dashed b-b line-lg pull-in"></div>
                
                <!-- 活动图片-->
                <div class="form-group">
                    <label class="col-lg-2 col-sm-3 control-label"><span class="text-danger wrapper-sm">*</span>活动图片:</label>
                    <div class="col-sm-6">
                    	<div class="previewWrap fl">
							<div up-load multi="1" draggable="true" data='imgData' size="310" ratio='' class="previewMain">
                                <div class="upLoadImgWrap">
                                    <div class="preViewImgWrap fl" ng-repeat="preImg in imgData">
                                        <div class="preViewImg">
                                            <div class="picItem">
                                                <div class="mask"><span class="reUpLoad" index="{{$index}}">重新上传</span></div>
                                                <div><img ng-src="{{preImg.src[0]}}" onload="if(this.width>=this.height){this.style.width='100%'}else{this.style.height='100%'}"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div ng-show="imgData.length<1" class="clear">
                                        <div class="text fl" ng-show="imgData.length<1">
                                            	点击上传图片<br>(请上传300KB以内图片)<br>(限jpg/png/jpeg)
                                        </div>
                                        <label class="upLoadImg fl" for="uploadFile2">
                                        	<!-- <img src="../../res/img/addPic.png" alt=""> -->
                                            <input type="file" accept="image/png,image/gif,image/jpeg" id="uploadFile2" autocomplete="off">
                                        </label>
                                    </div>
                                </div>
                            </div>
						</div>
                    </div>
                </div>
                <div class="line line-dashed b-b line-lg pull-in"></div>
                
                <!-- 备注-->
                <div class="form-group">
                    <label class="col-lg-2 col-sm-3 control-label" for="description">备注:</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" name="description" id="description" maxlength="65" placeholder="请输入备注" ng-model="record.description">
                    </div>
                </div>
                <div class="line line-dashed b-b line-lg pull-in"></div>

                <div class="form-group">
                    <div class="col-sm-6 col-sm-offset-2" >
                        <button type="submit" class="btn btn-info w-xs m-l-xl" ng-disabled="isDisabled">保存</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<style>
    #activity .record{
        width: 70%;
    }
    #activity .radio{
        min-width: 120px;
    }
    #activity .previewWrap{
        width:500px;
        padding-bottom: 10px;
        border:1px solid #d3d3d3;
    }
     #activity .previewWrap .text{
        margin-top:50px;
     }
     .MR10{
        margin-right: 10px;
     }
	.previewWrap{
	    text-align: center;
	    margin-right: 10px; 
	    margin-bottom: 20px;
	}
	.previewWrap .preview{
	    width: 330px;
	    height: 270px;
	    border: 1px solid #d6d5d5;
	    margin-top: 10px;
	}
	.previewWrap .preview .title{
	    padding:10px;
	    font-size: 12px;
	    text-align: left;
	}
	.previewWrap .upLoadImg{
	     width: 140px;
	     height: 140px;
	     border:1px dashed #d6d5d5;
	     padding-top: 38px;
	     margin:15px 0 0 30px;
	     display:inline-block;
	     background: url('../../res/img/addPic.png') no-repeat center;
	     cursor: pointer;
	}
	.previewWrap .preview .text{
	     color:#d6d5d5;
	     padding-top: 20px;
	}
	
	.previewWrap .text{
	     padding:13px 50px;
	     /*margin-top: 50px;*/
	}
	.previewWrap .preViewImgWrap{
	     margin: 15px;
	}
	.previewWrap .preViewImg{
	     width:150px;
	     height:150px;
	     overflow: hidden;
	}
	.fl{
	      float:left;
	}
input[type="file"]{
    display: none;
}
.previewMain{
    /*height:86%;*/
}

.preViewImg{
    width:300px;
    height:190px;
    overflow: hidden;
}
.preViewImg img{
    /*width: 100%;*/

}
.preViewImg .picItem{
    height: 100%;
    position: relative;
}
.preViewImg .mask + div{
    height: 100%;
    width: 100%;
}
.picItem:hover .mask{
    height:100%;
}
.preViewImg .mask{
    position: absolute;
    overflow: hidden;
    height:0;
    width: 100%;
    background:rgba(0,0,0,0.5);
    transition: all 0.3s;
}
.preViewImg span{
    position:absolute;
    width: 80px;
    height:34px;
    border-radius: 17px;
    line-height: 34px;
    text-align: center;
    color: #fff;
    cursor: pointer;
    background:deepskyblue;
    left:50%;
    top:50%;
    font-size: 12px;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
}
</style>